<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page session="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>找回密码</title>
<link type="text/css" rel="stylesheet" href="css/customCss/public.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/findpwd.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/validator.css" />

<script type="text/javascript" src="js/customJs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/customJs/function.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.ext.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validator.messages_zh.js"></script>

<style type="text/css">
	.input-groups .input-title, .input-groups input[type="password"]{
           display: inline-block; *display:inline; *zoom:1;
      }
      .input-groups .input-title{
          width: 80px; vertical-align: middle; text-align: right;
      }
      .input-groups input[type="password"]{
          width: 170px;
       }
</style>
</head>
<body>
	<div class="container">
        <div class="member-logo">
            <a href="＃">
                <img src="images/customLogin/logo.png">
            </a>
        </div>
        
        <c:if test="${flag eq 'change'}">
        	<h3 class="member-des">修改密码</h3><br>
        	<form action="${pageContext.request.contextPath}/findPassword?option=commitChangePwd" method="post" id="changePasswordForm">
		     <div class="input-groups">
		           <div class="input-group clearfix">
		               <div class="input-title">旧密码：</div>
		               <input name="oldpwd" id="oldpwd" class="pwd" type="password" placeholder="请输入旧密码" />
		               <input type="hidden" id="mobilePhone" name="mobilePhone" value="${mobile}"/>
		               <i class="icon-bg icon-input icon-bg-lock"></i>
		               <div class="input-err input-err-pwd" style="margin-left:80px;">
		                   <span id="oldpwdMsg"></span>
		               </div>
		           </div>
		        </div>
        
		        <div class="input-groups">
		            <div class="input-group clearfix">
		                <div class="input-title">新密码：</div>
		                <input name="pwd" id="pwd" class="pwd" type="password" placeholder="请设置新的登陆密码" />
		                <i class="icon-bg icon-input icon-bg-lock"></i>
		                <div class="input-err input-err-pwd" style="margin-left:80px;">
		                    <span id="pwdMsg"></span>
		                </div>
		            </div>
		        </div>

	        	<div class="input-groups">
	            	<div class="input-group clearfix">
	                	<div class="input-title">确认密码：</div>
	                	<input name="repwd" id="repwd" class="repwd" type="password" placeholder="请确认新的登陆密码" />
	                	<i class="icon-bg icon-input icon-bg-lock"></i>
		                <div class="input-err input-err-pwd" style="margin-left:80px;">
		                    <span id="repwdMsg"></span>
		                </div>
	            	</div>
	        	</div>
	        	
		        <div class="button-groups" style="overflow:hidden;">
		            <button class="next" type="submit" style="float:center;width:100%; clear: both">确定</button>
		        </div>
        	</form>
        </c:if>
        	
        <c:if test="${flag eq 'success'}">
	        <div class="findpwdfour">
		    	<h3>恭喜您，新密码设置成功!</h3>
		        <h4>尊敬的客户，您好：</h4>
		        <p>您的登陆密码修改成功！为了保障您的账号安全，请保管好并定期更改登录以及支付密码。如有任何疑问，请致电：4008-655-788。</p>
	       	</div>
	       	 	
	       	<div class="button-groups">
	            <button id="reLogin">重新登录</button>
	        </div>
        </c:if>
        <div class="copyright">苏州科贝尔实业有限公司版权所有-备案/许可证编号为：苏ICP备15035998号</div>
    </div>
    
    <script type="text/javascript">
	    $(function(){
    		jQuery.validator.addMethod("isRepassword", function(value, element){
	    		var password = $("#pwd").val();
	    		var repassword = $("#repwd").val();
	    		return this.optional(element) || (repassword == password);
	    	});
	    		
    		$("#changePasswordForm").validate({
	    		rules:{
	    			pwd:{required: true, maxlength: 20, minlength : 6},
	    			repwd:{required: true, maxlength: 20, minlength : 6, isRepassword : true},
	    			oldpwd:{required: true, maxlength: 20, minlength: 6, remote : {type : 'post', url : '${pageContext.request.contextPath}/findPassword?option=checkOldpwd', data : {'oldpwd' : function(){return $('#oldpwd').val();}, 'mobile' : function(){return $('#mobilePhone').val();}}}}
				},
				messages:{
					pwd:{
						required:"请输入密码",
						maxlength : "密码最长为20位字符",
						minlength : "密码最短为6个字符"
					},
					repwd:{
						required:"请输入确认密码",
						maxlength:"密码最长为20位字符",
						minlength : "密码最短为6个字符",
						isRepassword : "两次密码输入不一致"
					},
					oldpwd:{
						required : "请输入旧密码",
						remote : $.format("旧密码输入不正确")
					}
				},
				errorPlacement:function(error,element){
					$("#" + element.attr("name") + "Msg").empty();
					error.appendTo($("#" + element.attr("name") + "Msg"));
				}
	    	});
	    	
	    	$("#changePasswordForm").submit(function(){
	    		$("#changePasswordForm").valid();
	    	});
	    	
	    	if('${flag}' == 'success'){
	    		$('#reLogin').click('onclick', function(){
	    			window.location.href='${pageContext.request.contextPath}/login?service=${service}';
	    		});
	    	}
	    });
    </script>
</body>
</html>